<template>
    <div class="synchronization-log-container">
      <div class="search-top">
         <p class="title">同步日志查询</p>
         <div class="search-box">
           <el-row>
             <el-col :span="12">
               <div class="grid-content">
                 同步日期：
                 <el-date-picker
                   v-model="orderTime"
                   format="yyyy-MM-dd HH:mm:ss"
                   value-format="yyyy-MM-dd HH:mm:ss"
                   type="datetimerange"
                   @change="handleGetTime"
                   range-separator="至"
                   start-placeholder="开始日期"
                   end-placeholder="结束日期">
                 </el-date-picker>

               </div>
             </el-col>
             <el-col :span="6">
               <div class="grid-content">
                 店铺账号：
                 <el-select v-model="shopValue" placeholder="请选择">
                   <el-option
                     v-for="item in synchronousshopListBtn"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
                   </el-option>
                 </el-select>
               </div>
             </el-col>
             <el-col :span="6">
               <div class="grid-content-box">
                 <el-button type="success" @click="searchData">搜索</el-button>
               </div>
             </el-col>
           </el-row>
         </div>
       </div>
      <div class="table-box">
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="channel"
            label="平台">
            <template slot-scope="scope">
              <div class="bix">
                {{handleChoseChannel(scope.row.channel)}}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="store"
            label="店铺">
          </el-table-column>
          <el-table-column
            prop="creator"
            label="操作人">
          </el-table-column>
          <el-table-column
            prop="gmtCreate"
            label="同步时间">
            <template slot-scope="scope">
               <div class="time-color" @click="getDetailList(scope.row.id)">
                 {{scope.row.gmtCreate}}
               </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-ination">
          <el-pagination
            background
            layout="total,prev, pager, next"
            :current-page="popCurrentPage"
            @current-change="popPageChange"
            :page-count="popTotalCount"
            :total="totalNumPage">
          </el-pagination>
        </div>
      </div>
      <el-dialog
        title="同步日志详情"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        width="60%">
        <div class="pop-out-content">
          <div class="button-box">
            <el-button type="primary" @click="downDetail">导出</el-button>
          </div>
          <el-table
            :data="showTableList"
            style="width: 100%">
            <el-table-column
              prop="channel"
              label="平台">
              <template slot-scope="scope">
                <div class="bix">
                  {{handleChoseChannel(scope.row.channel)}}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="store"
              label="店铺">
            </el-table-column>
            <el-table-column
              prop="platformOrderId"
              label="订单编号">
            </el-table-column>
            <el-table-column
              prop="orderCreated"
              label="订单日期">
            </el-table-column>
            <el-table-column
              prop="extraInfo"
              label="未拉取原因">
            </el-table-column>
          </el-table>
          <div class="page-ination">
            <el-pagination
              background
              :page-size="10"
              layout="total,prev, pager, next"
              :current-page="pageIndex"
              @current-change="pageChange"
              :total="detailOut.length">
            </el-pagination>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
             <el-button @click="dialogVisible = false">关 闭</el-button>
         </span>
      </el-dialog>
    </div>
</template>

<script>
  import instance from '@/api/index.js'
  export default {
    name: "synchronizationLog",
    data(){
      return{
        dialogVisible:false,
        orderTime:[],
        synchronousshopListBtn:[],
        shopValue:null,
        page:1,
        tableData:[],
        popTotalCount:null,
        popCurrentPage:1,
        detailOut:[],
        pageIndex:1,
        detailId:'',
        showTableList:[],
        totalNumPage:[]
      }
    },
    methods:{
      handleGetTime(){

      },
      popSynchronousChannels() {
        let vm = this;
        this.synchronousshopListBtn = [];
        this.synchronousshopListBtn.push({id:null,name:'全部'})
        instance({
          method: 'post',
          url: 'v1/author/getAuthorShopList',
          data: {
            id: 0
          }
        }).then( (data)=> {
          if (data.data.success) {
            let result = data.data.data;
            this.synchronousshopListBtn = this.synchronousshopListBtn.concat(result);
          }
        })
      },
      /*拉取列表*/
      getDataList(){
        let param = {storeId:this.shopValue,page:this.popCurrentPage};
        this.orderTime && this.orderTime.length > 1 ? Object.assign(param,{begin:this.orderTime[0],end:this.orderTime[1],}):'';
        instance({
          method: 'post',
          url: 'v1/order/log/list',
          data: param
        }).then( (data)=> {
          if (data.data.success) {
            let result = data.data.data;
             this.tableData = result.list;
             this.popTotalCount = result.pages;
             this.totalNumPage = result.total;
          }
        })
      },
      searchData(){
        this.popCurrentPage = 1;
        this.getDataList();
      },
      popPageChange(pageIndex){
        this.popCurrentPage = pageIndex;
        this.getDataList();
      },
      /*获取订单日志详情*/
      getDetailList(id){
        /*window.open(`${window.domain}/v1/order/log?logId=${id}`);*/
       /* this.$router.push(`/v1/order/log?logId=${id}`)*/
        let api = `/v1/order/log/${id}/detail`
        this.detailId = id
        instance({
          method: 'get',
          url: api,
        }).then( (data)=> {
          if (data.data.success) {
            this.dialogVisible= true
            let result = data.data.data;
            this.detailOut = result;
            this.showTableList =  this.detailOut.slice((this.pageIndex-1)*10,this.pageIndex*10);
          }
        })
      },
      pageChange(pageindex){
        this.pageIndex= pageindex
        this.showTableList = this.detailOut.slice((pageindex - 1)*10,pageindex*10);
      },
      handleChoseChannel(flag){
        switch (flag) {
          case 1:
            return 'ebay';
            break;
          case 2:
            return 'Amazon';
            break;
          case 3:
            return 'magento';
            break;
          case 4:
            return 'other';
            break;
          default:
            return 'other'
            break;
        }
      },
      downDetail(){
        let api = `/v1/order/log/${this.detailId}/export`
        instance({
          method: 'post',
          url: api,
          responseType: 'blob'
        }).then( (data)=> {
          if (data.data) {
            let result = data;
            console.log(result)
            this.download(result);
          /*  this.dialogVisible = false;*/
          }
        })
      },
      // 下载文件
      download(data) {
        if (!data) {
          vm.$alert('下载失败！', '提示', {
            confirmButtonText: '确定',
          });
          return;
        }
        if (window.navigator.msSaveBlob) {
          // for ie 10 and later
          try {
            //let blob = new Blob([data.data], {type: "application/vnd.ms-excel"});
             let blob = new Blob([data.data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
            window.navigator.msSaveBlob(blob, '同步日志详情.xlsx');
          }
          catch (e) {
            console.log(e);
          }
        } else {
          //let blob = new Blob([data.data], {type: "application/vnd.ms-excel"});
          let blob = new Blob([data.data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
          let url = URL.createObjectURL(blob);
          let link = document.createElement('a');
          link.style.display = 'none';
          link.href = url;
          link.setAttribute('download', '同步日志详情');
          document.body.appendChild(link);
          link.click();
          URL.revokeObjectURL(url);
        }
      },
    },
    created(){
      this.popSynchronousChannels();
      this.getDataList()
    }

  }
</script>

<style lang='less'>
  .synchronization-log-container{
    padding: 20px;
    .search-top{
      background:rgba(255,255,255,1);
      box-shadow:0px 2px 12px 0px rgba(0,0,0,0.06);
      border-radius:4px;
      border:1px solid rgba(228,231,237,1);
      padding-top: 10px;
      padding-bottom: 10px;
      .title{
        border-left: 2px solid #67C23A;
        line-height: 31px;
        height: 31px;
        font-size:16px;
        font-weight:400;
        color:rgba(51,51,51,1);
        padding-left: 18px;
        position: relative;
        &:after{
          content: '';
          width: 98%;
          height: 1px;
          border-top:1px solid #E4E7ED;
          position: absolute;
          bottom: -4px;
          left: 0;
          right: 0;
          margin: 0 auto;
        }
      }
      .search-box{
        padding: 20px 20px 0px 20px;
        .el-row{
          .grid-content{
            display: flex;
            align-items: center;
            font-size:14px;
            font-weight:400;
            color:rgba(96,98,102,1);
          }
        }
      }
    }
    .table-box{
      padding: 20px;
      background:rgba(255,255,255,1);
      box-shadow:0px 2px 12px 0px rgba(0,0,0,0.06);
      border-radius:4px;
      border:1px solid rgba(228,231,237,1);
      margin-top: 20px;
      .time-color{
        color: #409EFF;
        cursor:pointer;
      }
      .el-table{
        margin-top: 15px;
        thead{
          background-color: #F5F7FA;
          tr{
            background-color: #F5F7FA;
            th{
              background-color: #F5F7FA;
              height: 60px;
              line-height: 60px;
              text-align: center;
              padding: 0;
            }
          }
        }
        tbody{
          tr{
            td{
              text-align: center;
              .el-input{
                width: 80%;
              }
            }
          }
        }
        .input-with-select{
          width: 200px !important;
        }
      }
      .page-ination{
        text-align: right;
        margin-top: 15px;
      }
    }
    .pop-out-content{
      .el-table{
        margin-top: 15px;
        thead{
          background-color: #F5F7FA;
          tr{
            background-color: #F5F7FA;
            th{
              background-color: #F5F7FA;
              height: 60px;
              line-height: 60px;
              text-align: center;
              padding: 0;
            }
          }
        }
        tbody{
          tr{
            td{
              text-align: center;
              .el-input{
                width: 80%;
              }
            }
          }
        }
        .input-with-select{
          width: 200px !important;
        }
      }
      .page-ination{
        text-align: right;
        margin-top: 15px;
      }
    }
  }
</style>
